<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="../js/d3.v3.js"></script>
</head>
<body>
<script>
	var w = 500;
	var h = 200;

	var dataset = [];
	for(var i=0; i< 25; i++){
		var newNumber = Math.random() *30;
		dataset.push(newNumber);
	}


	var svg = d3.select("body")
			.append("svg")
			.attr("width", w)
			.attr("height", h)

	svg.selectAll("rect")
			.data(dataset)
			.enter()
			.append("rect")
			.attr("x", function(d, i){
				return i * ( w/ dataset.length);
			})
			.attr("width", w / dataset.length - 1)
			.attr("height", function(d){
				return d * 4;
			})
			.attr("y", function(d){
				return h - d * 4;
			})
			.attr("fill", function(d){
				return "rgb(0, 0, " + Math.floor(d * 10) + ")";
			})

	svg.selectAll("text")
			.data(dataset)
			.enter()
			.append("text")
			.text(function(d){
				return Math.floor(d);
			})
			.attr("x", function(d, i){
				return i * (w / dataset.length) + (w/dataset.length - 1) / 2;
			})
			.attr("y", function(d){
				return h - (d * 4) + 14
			})
			.attr("font-size", "11px")
			.attr("fill", "white")
			.attr("text-anchor", "middle")





</script>
</body>
</html>